<template>
  <div>
    <el-config-provider :locale="zhCN">
      <inject-point name="head">
        <header class="header">
          <div class="header-wrapper">
            <div class="logo">
              <img src="/admin-logo-pc.png" :alt="AppName">
            </div>
            <header-search-bar class="header-search-bar" />
            <div class="spacer" />
            <div class="quick-menu" />
            <div class="user-menu">
              <nuxt-link v-if="!user?.id" to="/login" class="user-login">
                <el-button type="primary">
                  {{ t("header.user.login") }}
                </el-button>
              </nuxt-link>
              <el-dropdown v-else popper-class="user-menu">
                <el-avatar shape="circle" :src="user.avatarUrl" />
                <template #dropdown>
                  <div class="user-info">
                    <div class="user-name">
                      {{ user.username }}
                    </div>
                    <div>{{ user.group.groupName }}</div>
                  </div>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="reqLogout">
                      {{ t("header.user.logout") }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </header>
      </inject-point>
      <main class="main-wrapper">
        <slot />
      </main>
    </el-config-provider>
  </div>
</template>
<script lang="ts" setup>
import { useUser, useI18n, useRuntimeConfig, useGlobalCookie } from "#imports";
import zhCN from "element-plus/es/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from "element-plus";

const AppName = useRuntimeConfig().public.appName;
const { t } = useI18n();

const { data: user, refresh: refreshUser } = useUser();
const reqLogout = () => {
  ElMessageBox.confirm(
    t("header.user.logout-confirm"),
    t("header.user.logout"),
    {
      type: "warning",
      async beforeClose(action, instance, done) {
        if (action == "confirm") {
          instance.confirmButtonLoading = true;
          const access_token = useGlobalCookie("access_token", {
            expires: new Date(0)
          });
          access_token.value = "";
          await refreshUser();
          ElMessage.success(t("header.user.logout-success"));
        }
        done();
      }
    }
  ).catch(() => {
    /* ignore */
  });
};
</script>
<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-disabled3);

  &-wrapper {
    width: 100%;
    max-width: var(--max-width);
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 20px;
  }

  .logo {
    width: 140px;
    height: 24px;
    background: rgb(255 255 255 / 20%);
    margin: 16px 24px 16px 0;
    float: left;
  }

  .spacer {
    width: 100%;
  }
}

.main-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}

.header-search-bar {
  width: 100%;
  max-width: 320px;
}

.user-menu {
  display: flex;
  align-items: center;

  .user-info {
    padding: 4px 12px 0;
  }

  .user-name {
    font-size: 1.5em;
    font-weight: bold;
    min-width: 160px;
  }
}
</style>
